<template>
  <div class="wechatWithdrawal">
    <c-title :hide="false" :text="`我的${this.fun.initWithdrawal()}`"></c-title>
    <div class="priceBox">
      <div class="priceBox_txt">{{ this.fun.initWithdrawal() }}金额</div>
      <div class="price">
        <div class="priceIcon">{{ $i18n.t("money") }}</div>
        <div class="txt">{{ withdraw.amount }}</div>
      </div>
    </div>
    <div class="wxchatBox">
      <i class="iconfont icon-weixin"></i>
      <div class="infoBox">
        <div class="txt">{{ this.fun.initWithdrawal() }}至微信</div>
        <div class="name">{{ member.nickname }}</div>
      </div>
    </div>
    <div class="btn" @click="submit" v-if="withdraw.transfer_status != 1">{{ this.fun.initWithdrawal() }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      member: {},
      withdraw: {}
    };
  },
  activated() {
    this.fun.setWXTitle(this.fun.initWithdrawal());
    this.getData();
  },
  methods: {
    async getData() {
      let API = "wechat.merchant-transfer.index";
      if (this.$route.params.orderType == "supplier") {
        API = "plugin.supplier.frontend.supplier-wx-withdraw.index";
      } else if (this.$route.params.orderType == "love") {
        API = "plugin.love.Frontend.Modules.Love.Controllers.wx-transfer.receive";
      }
      let { data, msg, result } = await $http.post(API, { id: this.$route.params.id }, "");
      if (result) {
        if (data.withdraw.transfer_status == 1) {
          this.$dialog.confirm({ message: "这笔打款已确认收款", showCancelButton: false }).then(() => {
            this.$router.go(-1);
          });
          return;
        }
        this.withdraw = data.withdraw;
        this.member = data.member;
      } else {
        this.$toast(msg);
      }
    },
    async submit() {
      let API = "wechat.merchant-transfer.withdraw";
      if (this.$route.params.orderType == "supplier") {
        API = "plugin.supplier.frontend.supplier-wx-withdraw.withdraw";
      } else if (this.$route.params.orderType == "love") {
        API = "plugin.love.Frontend.Modules.Love.Controllers.wx-transfer.withdraw";
      }
      let { data, msg, result } = await $http.post(API, { id: this.$route.params.id }, "");
      if (result) {
        let resData = data;
        wx.ready(() => {
          wx.checkJsApi({
            jsApiList: ["requestMerchantTransfer"],
            success: res => {
              if (res.checkResult["requestMerchantTransfer"]) {
                WeixinJSBridge.invoke(
                  "requestMerchantTransfer",
                  {
                    mchId: resData.mch_id,
                    appId: resData.app_id,
                    package: resData.package_info
                  },
                  res => {
                    console.log(res);
                    if (res.err_msg === "requestMerchantTransfer:ok") {
                      console.log("展示成功");
                      // res.err_msg将在页面展示成功后返回应用时返回success，并不代表付款成功
                    } else if (res.err_msg === "requestMerchantTransfer:fail") {
                      console.log("展示失败");
                    } else if (res.err_msg === "requestMerchantTransfer:cancel") {
                      console.log("用户取消");
                    }
                  }
                );
              } else {
                alert("你的微信版本过低，请更新至最新版本。");
              }
            }
          });
        });
      } else {
        this.$toast(msg);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.btn {
  background: #f15353;
  border-radius: 1.28rem;
  margin: 0 0.75rem;
  margin-top: 1.88rem;
  padding: 0.78rem 0;
  box-sizing: border-box;
  color: #fff;
  border-radius: 1.28rem;
}
.wxchatBox {
  margin: 0 0.75rem 1.87rem 0.75rem;
  padding: 0.94rem;
  background: #ffffff;
  border-radius: 0.5rem;
  display: flex;
  align-items: flex-start;
  .icon-weixin {
    margin-right: 0.5rem;
    color: #1eb73d;
  }
  .infoBox {
    text-align: left;
    .txt {
      font-size: 0.88rem;
      margin-bottom: 0.5rem;
    }
    .name {
      font-size: 0.75rem;
      color: #6e6e79;
    }
  }
}
.priceBox {
  margin: 0.63rem 0.75rem;
  background: #fff;
  padding: 0.94rem;
  padding-bottom: 1.31rem;
  box-sizing: border-box;
  border-radius: 0.5rem;
  .priceBox_txt {
    font-size: 0.88rem;
    color: #00001c;
    text-align: left;
  }
  .price {
    display: flex;
    align-items: flex-end;
    margin-top: 1rem;
    .priceIcon {
      font-size: 0.94rem;
      margin-right: 0.3rem;
    }
    .txt {
      font-size: 1.75rem;
      line-height: 1.75rem;
    }
  }
}
</style>
